import { inject, observer } from 'mobx-react'
import React,{useCallback} from 'react'
import { StyleSheet, Text, View, Switch, TouchableOpacity } from 'react-native'
import Header from '../components/Header'
import { Camera } from 'expo-camera';

interface Props {
  store?:any
}

const User = (props: Props) => {
  const isEnabled = props.store.app.isEnable
  const toggleSwitch = useCallback(() => {
    props.store.app.changeIsEnable()
  }, [])
  // 照相机遮罩层的显示和隐藏
  const [show, setShow] = React.useState(false)
  const [photo, setPhoto] = React.useState<string>('')

  // 照相机 权限
  const [hasPermission, setHasPermission] = React.useState<any>(null);
  // 前后摄像头
  const [type, setType] = React.useState(Camera.Constants.Type.back);
  const cameraRef = React.useRef<any>()
  React.useEffect(() => {
    (async () => {
      // 获取照相机的权限
      // ios 使用 requestPermissionsAsync
      // android requestCameraPermissionsAsync
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={styles.container}>
      <Header title="我的"/>
      <View>
        <Text>是否显示购物车</Text>
        <Switch
          trackColor={{ false: "#767577", true: "#81b0ff" }}
          thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
          ios_backgroundColor="#3e3e3e"
          onValueChange={toggleSwitch}
          value={isEnabled}
        />
      </View>
      
      {
        show 
          ? <View style = { styles.cameraBox }>
              <Camera 
                ref={cameraRef}
                style={styles.camera} type={type}>
                <View >
                  <TouchableOpacity
                    onPress={() => {
                      setType(
                        type === Camera.Constants.Type.back
                          ? Camera.Constants.Type.front
                          : Camera.Constants.Type.back
                      );
                    }}>
                    <Text style={styles.text}> 翻转 </Text>
                  </TouchableOpacity>
                </View>
                <TouchableOpacity
                  style = {{ flex: 1}}
                  onPress = { () => {
                    async function fn () {
                      const photo = await cameraRef.current.takePictureAsync()
                      // console.log(photo)
                      setPhoto(photo)
                      setShow(false)
                    }
                    fn()
                  }}
                >
                  <View style={styles.picBtn}>
                    <Text style={{ color: '#fff'}}>拍照</Text>
                  </View>
                </TouchableOpacity>
              </Camera>
            </View>
          : null
      }
    </View>
  )
}

export default inject('store')(observer(User))

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative'
  },
  cameraBox: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  camera: {
    flex: 1
  },
  text: {
    color: '#fff',
    marginTop: 30,
    marginLeft: 30,
    fontSize: 40
  },
  picBtn: {
    width: 100,
    height: 100,
    position: 'absolute',
    left:'50%',
    top: '70%',
    backgroundColor: '#f66',
    borderRadius: 100,
    justifyContent: 'center',
    alignItems: 'center',
    transform:  [{translateX: -50}]
  }
})
